<template>
  <div>
    <ProspectusNav :step="0" />
    <ul class="step1-container">
      <li v-for="id in 5" :key="id">
        <router-link :to="{ name: 'step2', params: { id } }">
          <AutoImage src="/static/images/p2.jpg" size="contain" :width="730" :height="1120" />
          <div class="model-name">
            <span>T3 3室1厅1卫</span>
            <b>88.2 ㎡</b>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import ProspectusNav from "./components/ProspectusNav";
export default {
  components: { ProspectusNav }
};
</script>
<style lang="stylus">
.step1-container {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: auto;
  margin: 0;
  white-space: nowrap;
  height: calc(100vh - 358px);

  li {
    background: white;
    margin: 87px 0 81px;
    height: 1300px;
    width: 730px;
    margin-left: 81px;
    display: inline-flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;

    &:first-child {
      margin-left: 107px;
    }

    &:last-child {
      margin-right: 107px;
    }

    a {
      text-decoration: none;
    }

    .model-name {
      color: #000;
      height: 180px;
      flex: 1;
      box-shadow: 0px 9px 60px 5px rgba(13, 43, 190, 0.21);
      font-size: 56px;
      justify-content: space-between;
      display: flex;
      padding: 0 45px;
      align-items: center;
    }
  }
}
</style>